.site-card-group
  display: flex
  flex-wrap: wrap
  justify-content: flex-start
  margin: -0.5 * $gap
  align-items: stretch
.site-card
  margin: $gap * 0.5
  width: "calc(100% / 4 - %s)" % $gap
  @media screen and (min-width: $device-2k)
      width: "calc(100% / 5 - %s)" % $gap
  @media screen and (max-width: $device-tablet)
      width: "calc(100% / 3 - %s)" % $gap
  @media screen and (max-width: $device-mobile)
      width: "calc(100% / 2 - %s)" % $gap
  display: block
  line-height: 1.4
  height 100%
  .img
    width: 100%
    height 120px
    @media screen and (max-width: $device-mobile)
      height 100px
    overflow: hidden
    border-radius: $border-card * 0.5
    box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
    background: var(--color-block)
    img
      width: 100%
      height 100%
      // trans(.75s)
      transition: transform 2s ease
      object-fit: cover

  .info
    margin-top: $gap * 0.5
    img
      width: 32px
      height: 32px
      border-radius: 16px
      float: left
      margin-right: 8px
      margin-top: 2px
    span
      display: block
    .title
      font-weight: 600
      font-size: $fontsize-list
      color: var(--color-p)
      display: -webkit-box
      -webkit-box-orient: vertical
      overflow: hidden
      -webkit-line-clamp: 1
      trans()
    .desc
      font-size: $fontsize-footnote
      word-wrap: break-word;
      line-height: 1.2
      color: var(--color-meta)
      display: -webkit-box
      -webkit-box-orient: vertical
      overflow: hidden
      -webkit-line-clamp: 2
  .img
    trans()
  &:hover
    .img
      box-shadow: $boxshadow-float, $boxshadow-card-float
    .info .title
      color: $color-hover
